<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <title>运动会管理系统</title>
	    <link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body>
		<form class="layui-form" action="">
		
		    <div class="layui-form-item">
		        <div class="layui-inline">
		            <label class="layui-form-label">项目名</label>
		            <div class="layui-input-inline">
		                <input type="text" name="cnA" lay-verify="required"
		                       placeholder="请输入项目名" autocomplete="off" class="layui-input">
		            </div>
		        </div>
		    </div>
		    <div class="layui-form-item">
		        <div class="layui-input-block">
		            <button class="layui-btn" lay-submit lay-filter="searchComp">搜索</button>
		        </div>
		    </div>
		</form>
		      		
		        <table class="layui-hide" id="test" lay-filter="test"></table>
		
		        <script type="text/html" id="barDemo">
		            <a class="layui-btn layui-btn-xs" lay-event="edit">报名</a>
		            
		        </script>
		    </div>
		
		    
		</div>
		
		
		<script src="./layui/layui.js"></script>
		<script>
		//JS
		    layui.use(['element', 'layer', 'util'], function(){
		    var element = layui.element
		    ,layer = layui.layer
		    ,util = layui.util
		    ,$ = layui.$;
		
		  //头部事件
		  util.event('lay-header-event', {
		    //左侧菜单事件
		    menuLeft: function(othis){
		      layer.msg('展开左侧菜单的操作', {icon: 0});
		    }
		    ,menuRight: function(){
		      layer.open({
		        type: 1
		        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
		        ,area: ['260px', '100%']
		        ,offset: 'rt' //右上角
		        ,anim: 5
		        ,shadeClose: true
		      });
		    }
		  });
		
		});
		</script>
		<script>
		        layui.use(['table','layer','form'], function(){
		          var table = layui.table;
		          var layer = layui.layer;
		          var form = layui.form;
		          var searchTable = layui.layer;
		          var $ = layui.$;
		            table.render({
		            elem: '#test'
					,id: 'competition'
		            ,url:'http://localhost:8080/complistT'
		            ,cellMinWidth: 80
		            ,cols: [[
		            {field:'cnoA', title: '项目编号', sort: true,align: 'center'}
		            ,{field:'cnA',  title: '项目名称',align: 'center'}
		            ,{field:'max', title: '最大参赛人数', sort: true,align: 'center'}
		            ,{field:'placeA', title: '场地',align: 'center'}
		            ,{field:'dateA', title: '时间',align: 'center'}
		            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align: 'center'}
		        ]]
		        ,page: true
				,limits: [8,10,12]
		        });
				table.on('tool(test)', function(obj){
				  var data = obj.data;
				  if(obj.event === 'detail'){
				    layer.msg('ID：'+ data.id + ' 的查看操作');
				  }  else if(obj.event === 'edit'){
					layer.open({
						type: 2,
						title: "报名",
						content: "./window/addTeam.html",
						area: ['500px','500px'],
						end: function(){
							alert("报名成功！");
							table.reload("competition");						
						},
						success: function(layero, index){
							//把数据从表格层传送到弹出层，需要拿到弹出层的DOM，和索引
							//数据回显
							var body = layer.getChildFrame('body', index);
							body.find("#cnA").val(data.cnA);
							body.find("#placeA").val(data.placeA);	
							body.find("#max").val(data.max);														
							body.find("#cnoA").val(data.cnoA);
							body.find("#dateA").val(data.dateA);							
						}
					});
				  }
				});
				
				
				//监听搜索按钮
				form.on('submit(searchComp)', function(data){
					console.log("->",data);
					table.reload('competition', {
						 url: 'http://localhost:8080/searchCompT'
						    ,methods:"post"						        
					        , where: data.field
					        , page: {
					          curr: 1
							  ,limit: 10
					        }
					      });
					return false;
				});
		    });
		</script>
	</body>
</html>
